<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		
		<div id="app">
			<blog-post title="My journey with Vue"></blog-post>
			<blog-post title="Blogging with Vue"></blog-post>
			<blog-post title="Why Vue is so fun"></blog-post>
		</div>
		
		<div id="app-2">
			<blog-post
			  v-for="post in posts"
			  v-bind:key="post.id"
			  v-bind:title="post.title"
			></blog-post>
		</div>
		
		<script type="text/javascript">
			Vue.component('blog-post', {
			  props: ['title'],
			  template: '<h3>{{ title }}</h3>'
			})
			
			new Vue({
				el:"#app"
			})
			
			new Vue({
			  el: '#app-2',
			  data: {
			    posts: [
			      { id: 1, title: 'My journey with Vue' },
			      { id: 2, title: 'Blogging with Vue' },
			      { id: 3, title: 'Why Vue is so fun' }
			    ]
			  }
			})
		</script>
	</body>
</html>
